import React, { Component } from "react";
import { View, Image, Dimensions } from "react-native";
import Button from "components/Button";
import ImagePicker from "react-native-image-picker";
// import SuperImage from "components/Image";
import { upload } from "./api";

const { height } = Dimensions.get("window");

const screenHeight = height - 88 - 50;

class Photo extends Component {
  state = {
    avatarSource: "",
    photoUri:
      "file:///Users/yang/Library/Developer/CoreSimulator/Devices/E82EFDE1-EF70-4FA3-B0BB-EE7C4570770D/data/Containers/Data/Application/A02C46F3-AD7D-4198-8CF9-DB23633BEE4C/Documents/images/0281612E-0286-49D0-AA5F-285A2CD575A3.jpg",
  };

  localOnClick = () => {
    const options = {
      title: "请选择",
      cancelButtonTitle: "取消",
      takePhotoButtonTitle: "拍照",
      chooseFromLibraryButtonTitle: "从相册中选择",
      // customButtons: [{ name: "fb", title: "Choose Photo from Facebook" }],
      storageOptions: {
        skipBackup: true,
        path: "images",
      },
    };

    ImagePicker.showImagePicker(options, response => {
      if (response.didCancel) {
        // console.log("User cancelled image picker");
      } else if (response.error) {
        // console.log("ImagePicker Error: ", response.error);
      } else {
        // const source = { uri: response.uri };

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };
        // console.log("source", source);
        // this.setState({
        //   avatarSource: source,
        // });
        // console.log("开始上传");
        const { fileName: name, type, uri } = response;
        // console.log(name, type, uri);

        // const photo = {
        //   data: "",
        //   type: "image/jpeg",
        //   name: "photo.jpg",
        // };

        const form = new FormData();
        // form.append("file", JSON.stringify(photo));
        form.append("file", {
          uri,
          type,
          name,
        });
        // form.append("file", photo);

        upload(form).then(({ data }) => {
          const { uri: filePath } = data;
          this.setState({ avatarSource: filePath });
        });
      }
    });
  };

  render() {
    const { avatarSource, photoUri } = this.state;
    return (
      <View style={{ flex: 1, width: "100%" }}>
        <Button onPress={this.localOnClick}>Click</Button>

        {avatarSource ? (
          <Image
            style={{
              width: "100%",
              height: screenHeight,
            }}
            source={{
              uri: avatarSource,
            }}
          />
        ) : null}
        {photoUri ? (
          <Image
            style={{
              width: "100%",
              height: screenHeight,
            }}
            source={{
              uri: photoUri,
            }}
          />
        ) : null}

        {/* <View
          style={{
            width: "100%",
            // height: "100%",
            flex: 1,
            borderWidth: 1,
            borderStyle: "solid",
            overflow: "hidden",
          }}
        >
          <SuperImage />
        </View> */}
      </View>
    );
  }
}

export default Photo;
